<template>
  <view class='BottomView-container'>
    <view class="row login-bottom-container align-center" :style="{bottom: bottom +'rpx'}"
          v-if="showBottom">
      <image class="img-close" src="@/static/home/bai_guanbi.png" @click="showBottom = false">
      </image>
      <view class="row align-center justify-between right-container">
        <text class="content">立即登录保存做题记录</text>
        <view class="btn-container center" @click="$emit('open')">
          <text class="title">快捷登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'BottomView',
  props: ['page'],
  data() {
    return {
      showBottom: true
    }
  },
  computed: {
    ...mapGetters(['platform']),
    bottom() {
      // h5在底部导航页面渲染有问题，兼容一下
      if (this.platform === 'web') {
        if (this.page === 'home' || this.page === 'mine' || this.page === 'school') {
          return 90
        }
      }

      return 0
    },
  },
  methods: {}
}
</script>

<style lang='scss'>
.BottomView-container {
  .login-bottom-container {
    padding-right: 36upx;
    height: 100upx;
    background-color: rgba(0, 0, 0, 0.85);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    .img-close {
      width: 20upx;
      height: 22upx;
      padding-left: 36upx;
      padding-right: 36upx;
    }

    .right-container {
      flex: 1;
      margin-left: 4upx;

      .content {
        color: rgba(255, 255, 255, 1);
        font-size: 30upx;
      }

      .btn-container {
        background-color: #3073F6;
        border-radius: 28upx;
        height: 56upx;
        width: 172upx;

        .title {
          color: rgba(255, 255, 255, 1);
          font-size: 28upx;
        }
      }
    }
  }
}
</style>
